/*
 * @Description: 场地人口数量随时间变化的折线图
 * @Author: zy
 * @Date: 2021-04-06 14:15:16
 * @LastEditors: zy
 * @LastEditTime: 2021-04-21 20:39:36
 */
import * as echarts from 'echarts'
export class PeopleNumber {
  constructor (peopleNumber) {
    let chartDom = document.getElementById(peopleNumber)
    this.chart = echarts.init(chartDom)
    // console.log(this.chart)
  }
  // 设置option,主要是传入series,一些其他的设置例如dataZoom都在这里写
  setOp (data) {
    let series = []
    let time = data.map(function (d) {
      return d.time
    }).sort(function (a, b) {
      return a - b
    }).map(function (d) {
      let val = d
      let hour = Math.floor(val / 3600)
      val = val % 3600
      let minute = Math.floor(val / 60)
      val = val % 60
      let second = val
      return hour + ':' + minute + ':' + second
    })
    let legend = []
    let itemData = data.sort(function (a, b) {
      return a.time - b.time
    }).map(function (d) {
      return d.num
    })
    let item = {
      'name': data[0].area,
      'type': 'line',
      'smooth': true,
      'data': itemData
    }
    series.push(item)

    let option = {
      title: {
        text: data[0].area,
        subtext: '第一天'
      },
      dataZoom: [{
        type: 'slider',
        show: true,
        realtime: true,
        xAxisIndex: [0],
        start: 0,
        end: 100
      }],
      grid: {
        left: '1%',
        right: '2%',
        bottom: '15%',
        containLabel: true
      },
      'tooltip': {
        trigger: 'axis'
      },
      legend: {
        data: legend
      },
      toolbox: {
        show: true,
        feature: {
          magicType: {
            show: true,
            type: ['stack', 'tiled']
          },
          saveAsImage: {
            show: true
          }
        }
      },
      'xAxis': {
        'type': 'category',
        'boundaryGap': false,
        'data': time
      },
      'yAxis': {
        'type': 'value'
      },
      'series': series
    }
    return option
  }

  draw (data) {
    let op = this.setOp(data)
    this.chart.setOption(op)
    return this
  }
  // 获取刷取的dataZoom的范围,返回一个[start, end]
  getXaxisRange (data1) {
    // 实例化的对象的this
    let that = this
    // console.log(this.chart.getModel())
    // console.log(this)
    this.chart.on('datazoom', function (params) {
      // console.log(params)
      // 这里的this是图表的
      // console.log(this)
      // console.log(that.chart.getModel().option.dataZoom[0].startValue)
      let startValue = that.chart.getModel().option.dataZoom[0].startValue
      console.log(that.chart.getModel().option.xAxis[0].data[startValue])
      let endValue = that.chart.getModel().option.dataZoom[0].endValue
      console.log(that.chart.getModel().option.xAxis[0].data[endValue])
    })
  }
}
